<template>
	<div class="container">
		<div class="comment">
			<div class="brilliant">
				<div class="commentTilte">
					精彩评论
					<span class="commentLine"></span>
				</div>
				<div class="commentList" v-for="(item,index) in filmCommentList">
					<div class="headImg">
						<img :src="item.imgUrl" alt="" />
						<!--<img src="../../../../assets/images/movieClips/11/头像底.png" alt="" />-->
					</div>
					<div class="userInfo">
						<p>{{item.userName}}</p>
						<p>{{item.timer}}</p>
					</div>
					<div class="Tags">
						<img src="../../../../assets/images/movieClips/11/zan_btn_normal.png" alt="" />
						<div class="TagsNum">
							{{item.num}}
						</div>
					</div>
					<img class="replyBtn" @click="share($event,index)"  src="../../../../assets/images/movieClips/11/more_btn_normal.png" alt="" />
				    <div class="share" v-if="nowIndex==index">
				    	<div class="huifu">
				    	    <img src="../../../../assets/images/movieClips/12/弹出1-1.png" alt="" />
				    		<img src="../../../../assets/images/movieClips/12/t1.png" alt="" />
				    		<div>回复</div>
				    	</div>
				    	<div class="fenxiang">
				    	    <img src="../../../../assets/images/movieClips/12/弹出1-1.png" alt="" />
				    		<img src="../../../../assets/images/movieClips/12/t2.png" alt="" />
				    	    <div>分享</div>
				    	</div>
                        <div class="hiddenShow">
				    	    <img src="../../../../assets/images/movieClips/12/弹出2-1.png" alt="" />
				    	    <img src="../../../../assets/images/movieClips/12/t3.png" alt="" />
                        </div>

				    </div>
				    <div :class='nowIndex==index?"newCommentText":"commentText"'>
				     	{{item.content}}
				    </div>
				</div>
			</div>
			<div class="reviewBox">
	    	<div class="reviewTilte">
	    		收起回复
	    		<img src="../../../../assets/images/movieClips/11/收起回复箭头.png" alt="" @click="putComments"/>
	    	</div>
	    	<div class="reviewListBox" v-show="reviewList">
	    		<div class="reviewList" v-for="(item,index) in filmReviewList" :key="index">
		    		<div class="reviewInfo">
		    			<div>{{item.userName}}:</div>
		    		    <div>{{item.review}}</div>
		    		</div>
		    		<div class="shijian">
	    				<span>{{item.plyRating}}</span>
	    				<span>{{item.timer}}</span>
		    		</div>
	    	    </div>
	    	</div>
	    </div>
			<div class="brilliant allComments">
				<div class="commentTilte">
					全部评论
					<span class="commentLine"></span>
				</div>
				<div class="commentList" v-for="(item,index) in filmCommentList">
					<div class="headImg">
						<img :src="item.imgUrl" alt="" />
					</div>
					<div class="userInfo">
						<p>{{item.userName}}</p>
						<p>{{item.timer}}</p>
					</div>
					<div class="Tags">
						<img src="../../../../assets/images/movieClips/11/zan_btn_normal.png" alt="" />
						<div class="TagsNum">
							{{item.num}}
						</div>
					</div>
					<img class="replyBtn" src="../../../../assets/images/movieClips/11/more_btn_normal.png" alt="" />
				     <div class="commentText">
				     	{{item.content}}
				     </div>
				</div>
			</div>
			<div class="commentInput">
				<input type="text" placeholder="请输入评论内容..."/>
				<img src="../../../../assets/images/movieClips/11/下部-输入icon.png" alt="" />
			</div>
		</div>
	    <div class="goTop" @click="goTop" >
	    	回到顶部
	    </div>
	</div>
</template>

<script>
export default{
	name:"comment",
	data(){
		return{
			filmCommentList:[],
			filmReviewList:[],
			isLoading:false,
			reviewList:true,
			isShare:false,
			nowIndex:null,
		}
	},
	methods:{
		share(event,num){
			console.log(num)
			this.nowIndex=num;
            this.isShare=true
		},
		putComments(event){
			this.reviewList=!this.reviewList;
		},
		goTop(event){
			var time;
			time=setInterval(function(){
	            var top = document.body.scrollTop||document.documentElement.scrollTop;
	            top=top*0.9;
	            document.body.scrollTop=top;
	            document.documentElement.scrollTop=top;
	            if(top==0){
	                clearInterval(time);
	            }
            },100);
		}
	},
	created(){
		this.$axios.get("http://127.0.0.1:3000/filmCommentList")
		    .then(res=>{
		    	this.filmCommentList=res.data.filmCommentList
		    })
		    .catch(error=>{
		    	console.log(error)
		    })
		    
	    this.$axios.get("http://127.0.0.1:3000/filmReviewList")
		    .then(res=>{
		    	this.filmReviewList=res.data.filmReviewList;
		    })
		    .catch(error=>{
		    	console.log(error)
		    })
        }
	}
</script>

<style scoped lang="less">
@current:100rem;
.container{
	.comment{
		.brilliant{
			.commentTilte{
				/*height: 30//@current;*/
				font-size: 26/@current;
				border-left: 3/@current solid #AA5AE9;
				padding-left: 10/@current;
				margin-left: 20/@current;
				margin-top: 60/@current;
				.commentLine{
					display: block;
					height: 2/@current;
					width: 400/@current;
					background-color: #E1DCE9;
					position: relative;
					top: -15/@current;
					left: 110/@current;
				}
			}
			.commentList{
				border-bottom: 1px solid #E1DCE9;
				overflow: hidden;
				padding-bottom: 48/@current;
				.headImg{
					margin-left: 30/@current;
					float:left;
					img{
						border-radius: 50%;
						width: 60/@current;
						height: 60/@current;
						position: relative;
						top: -10/@current;
					}
				}
				.userInfo{
					margin-left: 20/@current;
					float:left;
					margin-top: 30/@current;
					p:nth-child(1){
						font-size: 26/@current;
						color: #b676eb;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 160/@current;
					}
					P:nth-child(2){
						font-size: 24/@current;
						color: #959595;
					}
				}
				.Tags{
					float:left;
					position: relative;
					left: 150/@current;
					top: -20/@current;
					img{
						@current
						width: 40/@current;
						height: 40/@current;
						position: absolute;
						top:65/@current
					}
					.TagsNum{
						font-size: 24/@current;
						color: #959595;
						position: absolute;
						top:75/@current;
						left: 50/@current;
					}
					
				}
			}
			.replyBtn{
				width: 70/@current;
				height: 45/@current;
				position: relative;
				left: 270/@current;
				top: -15/@current;
			}
			
			.share{
				position: relative;
				left: 70/@current;
				top: -110/@current;
				box-sizing: border-box;
				width:450/@current ;
				height: 90/@current;
				overflow: hidden;
				padding: 10/@current ;
				border-radius:10/@current;
				background: url('../../../../assets/images/movieClips/12/弹出底.png')no-repeat;
			    .huifu,.fenxiang{
			    	float: left;
			    	position: relative;
			    	font-size:24/@current;
			    	color:white;
			    }
			    .huifu{
			    	img:nth-child(1){
				    	width: 165/@current;
				        height: 70/@current;
			        }
			        img:nth-child(2){
			        	width: 30/@current;
			        	height: 30/@current;
			        	position: absolute;
			        	left: 30/@current;
			        	bottom: 25/@current;
			        }
			        div{
			        	position: absolute;
			        	left: 85/@current;
			        	bottom: 25/@current;
			        }
			    }
			    .fenxiang{
			    	margin-left: 10/@current;
			    	img:nth-child(1){
				    	width: 165/@current;
				        height: 70/@current;
			        }
			        img:nth-child(2){
			        	width: 30/@current;
			        	height: 30/@current;
			        	position: absolute;
			        	left: 30/@current;
			        	bottom: 30/@current;
			        }
			        div{
			        	position: absolute;
			        	left: 85/@current;
			        	bottom: 25/@current;
			        }
			    }
			    .hiddenShow{
			    	margin-left: 10/@current;
			    	float: left;
			    	position: relative;
			    	margin-top: -37/@current;
			    	img:nth-child(1){
			    		width: 80/@current;
			    		height: 70/@current;
			    	}
			    	img:nth-child(2){
			    		width: 30/@current;
			    		height: 30/@current;
			    		position: absolute;
			        	left: 20/@current;
			        	bottom: 45/@current;
			    	}
			    }
			    
			    
			}
			.newCommentText{
				margin-top: -90/@current;
				font-size: 26/@current;
				color: #959595;
				margin-left: 110/@current;
				margin-right: 40/@current;
			}
			.commentText{
				font-size: 26/@current;
				color: #959595;
				margin-left: 110/@current;
				margin-right: 40/@current;
				margin-top: -20/@current;
			}
		}
		.commentInput{
			margin-top: 30/@current;
			box-sizing: border-box;
			padding: 0 30/@current;
			input{
				box-sizing: border-box;
				width: 100%;
				display: block;
				height: 60/@current;
				font-size: 26/@current;
				color: #7b7781;
				border-radius: 10/@current;
				border: 1px solid #E1DCE9;
				padding-left: 75/@current;
			}
			img{
				width: 40/@current;
				height: 40/@current;
				position: relative;
				left: 20/@current;
				top: -120/@current;
			}
		}
	}
	.reviewBox{
		margin-top: 20/@current;
		.reviewTilte{
			font-size: 26/@current;
			color:#b676eb;
			text-align:right;
			margin-right:40/@current;
			img{
				width: 26/@current;
				height: 20/@current;
			}
		}
		.reviewListBox{
			margin: 0 40/@current;
			padding: 24/@current 30/@current;
			background-color: white;
			overflow: hidden;
			width: 580/@current;
			border: 1px solid #E1DCE9;
			box-sizing: border-box;
			.reviewList{
				overflow: hidden;
				border-bottom:1px solid #E1DCE9;
				padding-bottom:24/@current;
				.reviewInfo{
					padding-top: 15/@current;
					margin-bottom: 30/@current;
					padding-bottom: 20/@current;
					div:nth-child(1){
						font-size: 24/@current;
						color: #b676eb;
						float: left;
					}
					div:nth-child(2){
						font-size: 24/@current;
						color: #7b7781;
						float: left;
					}
				}
				.shijian{
					padding: 20/@current 0;
					height: 50/@current;
					width: 100%;
					position: relative;
					span{
						display: block;
						margin-top: 20/@current;
						color: #959595;
					    font-size: 24/@current;
					}
					span:nth-child(1){
						position: absolute;
						left: 20/@current;
						bottom: 0/@current;
					}
					span:nth-child(2){
						position: absolute;
						left: 390/@current;
						bottom: 0/@current;
					}
				}
			}
		}
	}
	.goTop{
		border-radius: 15/@current;
		padding: 0 20/@current;
		height: 100/@current;
		line-height: 100/@current;
		font-size: 24/@current;
		color: #b676eb;
		position: fixed;
		right: 20/@current;
		bottom: 20/@current;
		background-color: #b676eb;
		color: white;
		opacity: .5;
	}
}
</style>